<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
button{
    cursor:pointer;
}
.mytable{
    margin:50px auto 0 auto;
    width:auto;
}
.mytable input{
    min-width:300px;
}
main{
    margin:20px auto;
    padding:20px;
    width:96%;
    max-width:1200px;
    min-height:100px;
    border:1px solid #dddddd;
    word-break: break-all;
}
</style>
</head>
<body>
<table class="mytable">
    <tr>
        <td>token</td>
        <td><input id="token" value="" /></td>
    </tr>
    <tr>
        <td>文件</td>
        <td><input type="file" id="myfile" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><button id="mybutton" type="button">提交</button></td>
    </tr>
    <tr>
        <td colspan="2">备注: token来源于url中的变量, 用户也可在表单框中自行填写</td>
    </tr>
</table>
<main id="main">
</main>
<script type="text/javascript">
(function(){
    var token_array = location.search.match(new RegExp("[\?\&]token=([^\&]+)", "i"));
    if(token_array === null){
        alert('error, token not exist in url');
        return false;
    }
    var token       = token_array[1];
    
    document.getElementById("token").value = token;
})()


document.getElementById("mybutton").onclick = function(){
    document.getElementById("main").innerHTML = "";
    
    token       = document.getElementById("token").value.trim();
    if(token.length === 0){
        alert("error, token empty");
        return false;
    }else if(token.length !== 40){
        alert("error, token is incorrect about length");
        return false;
    }
    
    let files   = document.getElementById('myfile').files;
    if(files.length === 0){
        alert("error, select location video file first");
        return false;
    }

    let file    = files[0];

    let type    = file.type;
    if('video/mp4'.indexOf(type) === -1){
        toastr.error('仅允许上传视频文件, 且mp4格式');
        return false;
    }
    
    var data = new FormData(); 
    data.append('video_file', file);
    data.append('video_md5',  "123456789");
    
    var xmlhttp;
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var response= xmlhttp.responseText;
            show(response);
            var object  = JSON.parse(response);
            if(object.code === 1){
                task_id = object.data.task_id;
            }
            setTimeout(function(){
                heart(task_id);
            }, 3000);
        }
    }
    
    xmlhttp.open("POST", '/api/open/task/upload', true);
    xmlhttp.setRequestHeader('Accept',          'application/json');
    xmlhttp.setRequestHeader('Authorization',   'Bearer ' + token);
    xmlhttp.send(data);
}


function heart(task_id){
    token       = document.getElementById("token").value.trim();
    
    var json    = new Object();
    json.task_id= task_id;
    var data    = JSON.stringify(json);
    
    var xmlhttp;
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var response= xmlhttp.responseText;
            show(response);
            var object  = JSON.parse(response);
            if(object.code === 1){
                if(object.data.task_state_code !== 20){
                    setTimeout(function(){
                        heart(task_id);
                    }, 3000);
                }
            }
        }
    }
    
    xmlhttp.open("POST", '/api/open/task/state', true);
    xmlhttp.setRequestHeader('Content-Type',    'application/json');
    xmlhttp.setRequestHeader('Accept',          'application/json');
    xmlhttp.setRequestHeader('Authorization',   'Bearer ' + token);
    xmlhttp.send(data);

}


function show(message){
    var date    = new Date();
    var hour    = date.getHours();
    var minute  = date.getMinutes();
    var second  = date.getSeconds();
    if(hour < 10)   hour    = '0' + hour;
    if(minute < 10) minute  = '0' + minute;
    if(second < 10) second  = '0' + second;
    var time    = hour + ':' + minute + ':' + second;
    var p       = document.createElement("p");
    var text    = document.createTextNode(time + ' ' + message);
    p.appendChild(text);
    var main    = document.getElementById("main");
    main.appendChild(p);
}
</script>
</body>
</html>